<!-- 新鲜好物 -->
<template>
    <div class="home-new" ref="target">
      <HomePanel title="新鲜好物" sub-title="新鲜出炉 品质靠谱">
        <template #right><XtxMore path="/" /></template>
        <!-- 面板内容 -->
          <transition name="fade">
            <ul class="goods-list" v-if="goods.length">
              <li v-for="item in goods" :key="item.id">
                <RouterLink :to="`/product/${item.id}`">
                  <img :src="item.picture" alt="">
                  <p class="name ellipsis">{{item.name}}</p>
                  <p class="price">&yen;{{item.price}}</p>
                </RouterLink>
              </li>
            </ul>
            <!-- 骨架屏组件 -->
            <HomeSkeleton bg="#f0f9f4" v-else/>
        </transition>
      </HomePanel>
    </div>
  </template>
  <script>
  import HomePanel from './home_pannel.vue'
  import { findNew } from '@/api/home'
  import HomeSkeleton from './home_skeleton.vue'
  import {useLazyData} from '@/hooks/index.js'
  export default {
    name: 'HomeNew',
    components: { HomePanel,HomeSkeleton },
    setup () {
      // const goods = ref([])
      // const target = ref(null)
      const {result, target} = useLazyData(findNew)
      return { goods: result ,  target}
    }
  }
  </script>
  <style scoped lang="less">
  .goods-list {
    display: flex;
    justify-content: space-between;
    height: 406px;
    li {
      width: 306px;
      height: 406px;
      background: #f0f9f4;
      .hoverShadow();
      img {
        width: 306px;
        height: 306px;
      }
      p {
        font-size: 22px;
        padding: 12px 30px 0 30px;
        text-align: center;
      }
      .price {
        color: @priceColor;
      }
    }
  }
  </style>